class MyVue{
    constructor(options){
        //1.通过属性保存选项的数据
        this.$options = options||{}
        this.$data = options.data || {}
        this.$el = 'string' === typeof options.el ? document.querySelector(options.el):options.el
        
        //2.把data中的成员转换为getter和setter，注入到vue实例中,形成对象代理，使得用户在调用this.xxx的时候实际上调用的是this.data.xxx
        this._proxyData(this.$data);
        
        //3.调用observer对象，监听数据的变化
        new Observer(this.$data);
        
        //4.调用compiler对象，解析指令和差值
        new Compiler(this);
    }
     _proxyData(data){   //将data中的属性代理到Vue的实例上
        Object.keys(data).forEach(key => {
            Object.defineProperty(this, key ,{
                enumerable:true,
                configurable:true,
                get(){
                    return data[key]
                },
                set(newValue){
                    if (newValue != data[key]) {
                        data[key] = newValue;
                    }
                }

            })
        });
    }
    
}